<template>
  <div class="analysis-tools-bar">
    <div class="tools-header">
      <h2 class="tools-title">银杏ERP 企业AI助理</h2>
      <div class="tools-actions">
        <el-tooltip content="编辑工具排序" placement="top">
          <el-button type="primary" size="small" plain circle @click="editToolOrder">
            <i class="fa fa-sort"></i>
          </el-button>
        </el-tooltip>
        <el-tooltip content="更多工具" placement="top">
          <el-dropdown trigger="click" @command="handleToolCommand">
            <el-button type="primary" size="small" plain circle>
              <i class="fa fa-ellipsis-h"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="more-tools">所有工具</el-dropdown-item>
                <el-dropdown-item command="financial-analysis">财务分析</el-dropdown-item>
                <el-dropdown-item command="performance-report">述职报告</el-dropdown-item>
                <el-dropdown-item command="meeting-agenda">会议纲要</el-dropdown-item>
                <el-dropdown-item command="annual-meeting-ideas">年会节目创意</el-dropdown-item>
                <el-dropdown-item command="marketing-campaign">市场营销活动</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-tooltip>
      </div>
    </div>

    <div class="tools-container">
      <div 
        v-for="tool in visibleTools"
        :key="tool.id"
        class="tool-item"
        @click="selectTool(tool)"
        :class="{ 'active': selectedTool && selectedTool.id === tool.id }"
      >
        <div class="tool-icon">
          <i :class="tool.icon"></i>
        </div>
        <div class="tool-name">{{ tool.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 工具数据
const tools = ref([
  { 
    id: 'financial-analysis', 
    name: '财务分析', 
    icon: 'fa fa-line-chart',
    description: '分析财务数据，提供关键指标解读和决策建议'
  },
  { 
    id: 'profitability-analysis', 
    name: '盈利能力分析', 
    icon: 'fa fa-money',
    description: '分析企业盈利能力，识别利润增长点和改进空间'
  },
  { 
    id: 'cash-flow-analysis', 
    name: '现金流分析', 
    icon: 'fa fa-exchange',
    description: '分析企业现金流状况，评估流动性和财务健康度'
  },
  { 
    id: 'operational-efficiency', 
    name: '运营效率分析', 
    icon: 'fa fa-cogs',
    description: '分析企业运营效率，发现优化空间'
  },
  { 
    id: 'performance-report', 
    name: '述职报告', 
    icon: 'fa fa-file-text-o',
    description: '生成专业的述职报告，展示工作成果和价值'
  },
  { 
    id: 'meeting-agenda', 
    name: '会议纲要', 
    icon: 'fa fa-calendar-check-o',
    description: '协助创建会议纲要，提高会议效率'
  },
  { 
    id: 'annual-meeting-ideas', 
    name: '年会节目创意', 
    icon: 'fa fa-star',
    description: '提供创新的年会节目创意和策划建议'
  },
  { 
    id: 'marketing-campaign', 
    name: '市场营销活动', 
    icon: 'fa fa-bullhorn',
    description: '策划市场营销活动，提高品牌知名度和销售转化'
  }
]);

// 计算属性：显示的工具（只显示前6个）
const visibleTools = computed(() => {
  return tools.value.slice(0, 6);
});

const selectedTool = ref(null);

// 选择工具
function selectTool(tool) {
  selectedTool.value = tool;
  emit('tool-selected', tool);
}

// 编辑工具排序
function editToolOrder() {
  ElMessageBox.prompt('请按拖拽方式排序工具', '编辑工具排序', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    ElMessage({
      type: 'success',
      message: '工具排序已更新'
    });
  }).catch(() => {});
}

// 处理下拉菜单命令
function handleToolCommand(command) {
  if (command === 'more-tools') {
    // 打开更多工具页面
    ElMessage('打开更多工具页面');
  } else {
    // 查找并选择对应的工具
    const tool = tools.value.find(t => t.id === command);
    if (tool) {
      selectTool(tool);
    }
  }
}

// 定义事件
const emit = defineEmits(['tool-selected']);
</script>

<style scoped>
.analysis-tools-bar {
  padding: 10px 20px;
  background: linear-gradient(135deg, #3a8ee6 0%, #5c6bc0 100%);
  color: white;
  border-bottom: 1px solid #ddd;
}

.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.tools-title {
  font-size: 18px;
  margin: 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tools-container {
  display: flex;
  overflow-x: auto;
  padding-bottom: 5px;
  gap: 10px;
  scrollbar-width: thin;
}

.tools-container::-webkit-scrollbar {
  height: 4px;
}

.tools-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.tools-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
  flex-shrink: 0;
}

.tool-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.tool-item.active {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tool-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.tool-name {
  font-size: 13px;
  white-space: nowrap;
}
</style> 